<template>
    <template v-for="item in menuListData" :index="item.id">
        <!-- 取消默认的 index="1"否则折叠效果错乱（无法指定具体项） -->
        <el-sub-menu v-if="item.children" :index="item.id+''">
            <template #title>
                <span>{{item.title}}</span>
            </template>
            <MenuList :menuListData="item.children" />
        </el-sub-menu>
        <!-- +''处理非字符串类型井警告问题 -->
        <el-menu-item v-else :index="item.id+''">
            <span @click="handleClick(item)">{{item.title}}</span>
        </el-menu-item>
    </template>
</template>

<script>
    import { defineComponent } from "vue";
    import Router from "../router/index";
    import { allInfoStore } from '../store/all.js'
    export default defineComponent({
        name: "MenuList",
        props: {//接受父页面或父组件传递数据
            menuListData: {}
        },
        methods: {
            handleClick(data) {
                const path = JSON.parse(JSON.stringify(data)).href;
                const allInfo = allInfoStore()
                allInfo.addMenu(data);
                allInfo.changSelectedTag(path);
                Router.push(path)//路由跳转
            }
        }
    })
</script>

